$(() => {
  // console.log('图表页JS')
  // 业务1：获取统计数据
  const getDataInfo = () => {
    myAjax('GET', '/admin/data/info', {}, (res) => {
      // console.log(res)
      const htmlStr = template('info', res)
      // console.log(htmlStr)
      $('.spannel_list').html(htmlStr)
    })
  }
  getDataInfo()

  // 业务2：折线图(面积图)
  const chartLine = (arr1, arr2) => {
    // 存放图表的容器
    const chartDom = document.getElementById('curve_show')
    // 初始化图表
    const myChart = echarts.init(chartDom)
    // 图表配置
    const option = {
      // 鼠标悬停提示
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      // 标题配置
      title: {
        left: 'center',
        text: '文章日新增趋势',
      },
      // 图表大小配置
      grid: {
        left: '5%',
        right: '5%',
        bottom: '50px',
      },
      // 颜色配置
      color: [
        // 渐变色
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'gold', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'red', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      ],
      // x轴
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: arr1,
      },
      // y轴
      yAxis: {
        type: 'value',
      },
      // 图表集
      series: [
        {
          // 数据
          data: arr2,
          // 折线图
          type: 'line',
          // 开启平滑
          smooth: true,
          areaStyle: {},
          // 顶部数字显示
          label: {
            show: true,
            position: 'top',
          },
        },
      ],
    }
    // 如果有配置，按照配置生成图表
    option && myChart.setOption(option)
  }

  // 🎯练习重点：对接 ajax 请求获取数据，基于数据生成折线图
  const getLineData = () => {
    // 1. 发送请求获取数据
    myAjax('GET', '/admin/data/article', {}, (res) => {
      // 2. 处理数据的格式
      // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
      const arr1 = res.date.map((item) => item.date)
      const arr2 = res.date.map((item) => item.count)
      // 3. 调用图表，传入处理后的数据
      chartLine(arr1, arr2)
    })
  }
  getLineData()

  // 业务3：饼图
  const chartPie = (arr) => {
    const chartDom = document.getElementById('pie_show')
    const myChart = echarts.init(chartDom)
    const option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'center',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          data: arr,
        },
      ],
    }

    option && myChart.setOption(option)
  }

  // 对接 ajax 饼图数据
  const getPieData = () => {
    // 1. 拿数据
    myAjax('GET', '/admin/data/category', {}, (res) => {
      // console.log(res)
      // 2. 加工数据
      // 🎯 map 进阶用法：返回对象，可以用小括号把对象包起来
      const arr = res.date.map((item) => ({ value: item.articles, name: item.name }))
      // console.log(arr)
      // 3. 使用数据
      chartPie(arr)
    })
  }
  getPieData()

  // 业务4：柱状图
  const chartBar = (arr1, arr2) => {
    const chartDom = document.getElementById('column_show')
    const myChart = echarts.init(chartDom)
    const option = {
      color: ['#55ff00'],
      xAxis: {
        type: 'category',
        data: arr1,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: arr2,
          type: 'bar',
          barWidth: 40,
        },
      ],
    }
    option && myChart.setOption(option)
  }
  const getBarData = () => {
    myAjax('GET', '/admin/data/visit', {}, (res) => {
      // 🎯处理对象数据
      const arr1 = Object.keys(res.data) // 获取对象的 key ，返回值为数组
      const arr2 = Object.values(res.data) // 获取对象的value，返回值为数组
      chartBar(arr1, arr2)
    })
  }
  getBarData()
})
